<template>
	<t-card>
		<div class="refinery-management">
			<!-- 顶部筛选区域 -->
			<div class="filter-section">
				<t-tabs :value="activeTab" @change="onTabChange">
					<t-tab-panel v-for="item in provinceList" :value="item.id" :label="item.provinceName" />
				</t-tabs>
				<t-button theme="primary" @click="showAddDialog">新建炼厂</t-button>
			</div>

			<!-- 炼厂卡片列表 -->
			<div class="refinery-card-list">
				<t-row :gutter="[16, 16]">
					<t-col :span="4" v-for="(refinery, index) in refineryList" :key="index">
						<t-card class="refinery-card" hover-shadow>
							<div class="refinery-info">
								<div class="refinery-info-left">
									<div class="province">{{ refinery.province }}</div>
									<div class="refinery-name">{{ refinery.refineryName }}</div>
									<div class="oil-info">所在市: {{ refinery.city }}</div>
									<div class="oil-info">地 址: {{ refinery.address }}</div>
									<div class="stock-info">创建时间: {{ refinery.createTime }}</div>
								</div>
							</div>
							<div class="action-buttons">
								<t-button variant="outline" theme="primary"
									@click="onEditRefinery(refinery)">编辑炼厂</t-button>

								<!-- <t-button variant="outline" theme="primary"
									@click="onViewReport(refinery)">检测报告</t-button> -->

								<t-button variant="outline" theme="primary"
									@click="toStockPage(refinery)">库存管理</t-button>
							</div>
						</t-card>
					</t-col>
				</t-row>
				<t-pagination v-model="pagination.current" :total="pagination.total"
					:page-size.sync="pagination.pageSize" @current-change="onCurrentChange"
					@page-size-change="onPageSizeChange" />
			</div>
		</div>

		<!-- 炼厂对话框（新建/编辑共用） -->
		<!-- <add-refinery-dialog :visible="dialogVisible" :is-edit="isEdit" :edit-data="editData" @close="hideDialog"
			@submit="handleSubmit" /> -->
	</t-card>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive } from 'vue';
	// import AddRefineryDialog from './components/AddRefineryDialog.vue';
	import { getRefineryList } from '@/api/refinery.ts'
	import { getProvinceList } from '@/api/common.ts'
	import { useRouter } from 'vue-router';
	const router = useRouter();

	const loading = ref(false);
	const formData = reactive({
		region: 'all',
		status: 'all',
	});

	const pagination = ref({
		current: 1,
		pageSize: 9,
		total: 0,
	});

	const tableData = ref([]);


	const onPageChange = (curr : number) => {
		pagination.value.current = curr;
	};


	interface RefineryInfo {
		id : string;
		province : string;
		name : string;
		currentOil : string;
		totalStock : string;
		soldStock : string;
		availableStock : string;
	}

	const activeTab = ref('0');
	const dialogVisible = ref(false);
	const isEdit = ref(false);
	const editData = ref<any>(null);

	onMounted(() => {
		// 模拟数据，实际项目中应该从API获取
		getProvinceListApi()
	});

	const provinceId = ref([])

	const onCurrentChange = (e) => {
		pagination.value.current = e
		getRefineryListApi()
	}
	const onPageSizeChange = (e) => {
		pagination.value.pageSize = e
		getRefineryListApi()
	}

	const provinceList = ref([])
	const getProvinceListApi = () => {
		getProvinceList({
			pageNo: 1,
			pageSize: 99
		}).then(res => {
			provinceList.value = res.records
			getRefineryListApi()
		})
	}
	const refineryList = ref([])
	const getRefineryListApi = () => {
		getRefineryList({
			pageNo: pagination.value.current,
			pageSize: pagination.value.pageSize,
			provinceId: provinceId.value == 0 ? null : provinceId.value
		}).then(res => {
			tableData.value = res.records
			pagination.value.total = res.total
			refineryList.value = res.records
		})
	}

	const onTabChange = (value : string) => {
		activeTab.value = value;
		provinceId.value = value
		pagination.value.current = 1
		pagination.value.pageSize = 9
		getRefineryListApi()
	};

	// 显示新建炼厂弹窗
	const showAddDialog = () => {
		router.push('/refinery/add');
	};

	// 隐藏弹窗
	const hideDialog = () => {
		dialogVisible.value = false;
	};

	const toStockPage = (row) => {
		router.push({
			path: `/refinery/management/stockPage`,
			query: {
				refineryId: row.id,
				refineryName: row.refineryName
			}
		});
	}


	if (isEdit.value) {
		// 编辑逻辑
		console.log('更新炼厂', formData.id);
		// TODO: 调用编辑API
	} else {
		// 新建逻辑
		console.log('新建炼厂');
		// TODO: 调用新增API
	}

	const onEditRefinery = (refinery : RefineryInfo) => {
		// 编辑炼厂逻辑
		router.push({
			path: '/refinery/add',
			query: {
				id: refinery.id,
			},
		});
	};

	const onViewReport = (refinery : RefineryInfo) => {
		// 查看检测报告逻辑
		console.log('查看检测报告', refinery);
	};

	const goToAddRefinery = () => {
		router.push('/refinery/add');
	};
</script>

<style lang="less" scoped>
	.refinery-management {
		width: 100%;

		.filter-section {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
		}

		.refinery-card-list {
			margin-top: 16px;
		}

		.refinery-card {
			height: 100%;
			margin-bottom: 16px;

			.refinery-info {
				display: flex;
				flex-direction: column;
				margin-bottom: 16px;

				.province {
					font-size: 14px;
					margin-bottom: 8px;
				}

				.refinery-name {
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 16px;
				}

				.oil-info,
				.stock-info,
				.sold-info,
				.available-info {
					margin-bottom: 8px;
					font-size: 14px;
				}
			}

			.action-buttons {
				display: flex;
				justify-content: space-between;
				margin-top: 16px;
			}
		}
	}
</style>